<template>
    <div align="center" >
    <el-card class="box-card-1">
        <div slot="header" class="clearfix">
            <span> <h5> 公告发布</h5></span>
            <el-button type="text" style="float: right; padding: 3px 0" @click="submitMessage">发布</el-button>
        </div>
        <div>
            <el-form
                    class="editform"
                    ref="ruleForm"
                    :rules="rules4"
                    label-position="left"
                    label-width="80px"
                    :model="addData"
            >

                <el-form-item label="公告标题" prop="noticeName">
                    <el-input v-model="addData.noticeName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="公告简介" prop="noticeIntro">
                    <el-input v-model="addData.noticeIntro" placeholder="请输入"></el-input>
                </el-form-item>

                <el-form-item label="发布时间" prop="releaseTime">
                    <!--<el-input v-model="addData.releaseTime" placeholder="请输入"></el-input>-->
                    <div class="block" align="left">
                        <span class="demonstration"></span>
                        <el-date-picker
                                v-model="addData.releaseTime"
                                align="left"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <!--<el-form-item label="发布人" prop="email">-->
                    <!--<el-input v-model="addData.createPerson" placeholder="请输入"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="公告内容" prop="noticeContent">-->
                <div>
                    <div ><h4>公告内容</h4></div>
                    <!--<el-input v-model="d" placeholder="请输入"></el-input>-->
                    <div id="toolbar-container"></div>
                    <!--编辑器容器-->
                    <div id="editor">
                        <p>This is the initial editor content.</p>
                    </div>
                    <!--&lt;!&ndash;<div v-html="addData.noticeContent"></div>&ndash;&gt;-->
                </div>
                <!--</el-form-item>-->

            </el-form>
        </div>
    </el-card>
</div>
</template>

<script >
    import CKEditor from '@ckeditor/ckeditor5-build-decoupled-document';
    import axios from "../../utils/axios";
    export default {
        data() {
            return {
                editor:null,//编辑器实例
                addDate:"",
                d:""
                ,
                addData: {
                    noticeName: "",
                    noticeIntro: "",
                    noticeContent: "",
                    releaseTime:"",
                    createPerson:"",
                },
                rules4: {
                    noticeName:[{ required: true, message: "必填", trigger: "blur" }],
                    noticeIntro:[{ required: true, message: "必填", trigger: "blur" }],
                    noticeContent: [{ required: true, message: "必填", trigger: "blur" }],
                    releaseTime: [{ required: true, message: "必填", trigger: "blur" }],
                    createPerson: [{ required: true, message: "必填", trigger: "blur" }],
                },

            };
        },
        mounted() {
            this.initCKEditor()

        },
        created() {
            this.initCKEditor()

        },

        methods: {
            submitMessage() {
                this.addData.noticeContent=this.editor.getData();
                let obj = Object.assign({}, this.addData)
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        axios({
                            method: "POST",
                            url: "/notice/saveNoticeManage",
                            data: obj,
                        }).then((res) => {
                            if (res.code == 200) {
                                this.$message.success("添加成功");
                                // this.adduserDialogVisible = false;
                                // this.getUserList(this.pageNum);
                                this.$refs.ruleForm.resetFields();
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    } else {
                        this.$message.error("内容不完整");
                    }
                });
            },
            //ckeditor
            initCKEditor() {

                CKEditor.create(document.querySelector('#editor'), {
                    ckfinder: {
                        uploadUrl: '/admin/Upload/uploadUrl'
                        //后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
                    }
                }).then(editor => {
                    const toolbarContainer = document.querySelector('#toolbar-container');
                    toolbarContainer.appendChild(editor.ui.view.toolbar.element);
                    this.editor = editor //将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
                    this.editor.setData("");
                }).catch(error => {
                    console.error(error);
                });
            },

            edituserDialog(){
                // this.setData();
                alert(this.editor.getData());
                this.d=this.editor.getData();
            },



        },



    }
</script>

<!--<style scoped>-->
<style>
    h5{
        font-size: 2rem;
    }
    .browBox {
        width: 100%;
        height: 200px;
        background: #e6e6e6;
        position: absolute;
        z-index: 100;
        bottom: 0px;
        overflow: scroll;
    }
    .browBox ul {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
    }
    .browBox ul li {
        cursor: pointer;
        width: 10%;
        font-size: 26px;
        list-style: none;
        text-align: center;
    }
    .submit-btn {
        margin: 0 15px 10px 0;
        float: right;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }



    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card-1 {
        min-height:600px;
        width: 750px;
    }



</style>